<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" >

<title>react hook | 小克的blog</title>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="shortcut icon" href="https://woodywrx.gitee.io/blog/favicon.ico?v=1615823433634">
<link rel="stylesheet" href="https://woodywrx.gitee.io/blog/styles/main.css">



<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>



    <meta name="description" content="🙃背景
在好奇心的驱使下，还是打开了==react hook==的大门，但是有些东西吧，还是得靠自己琢磨琢磨才能体会。


优势
在react hook里，函数式组件也能有状态管理了。它大概长这样！

import React, {use..."/>
    <meta name="keywords" content="前端入坑"/>
</head>
<body>

<div id="app" class="main">

    <div class="sidebar" :class="{ 'full-height': menuVisible }">
  <div class="top-container" data-aos="fade-right">
    <div class="top-header-container">
      <a class="site-title-container" href="https://woodywrx.gitee.io/blog">
        <img src="https://woodywrx.gitee.io/blog/images/avatar.png?v=1615823433634" class="site-logo">
        <h1 class="site-title">小克的blog</h1>
      </a>
      <div class="menu-btn" @click="menuVisible = !menuVisible">
        <div class="line"></div>
      </div>
    </div>
    <div>
      
        
          <a href="https://woodywrx.gitee.io/blog" class="site-nav">
            首页
          </a>
        
      
        
          <a href="https://woodywrx.gitee.io/blog/tags" class="site-nav">
            标签
          </a>
        
      
        
          <a href="https://woodywrx.gitee.io/blog/post/about" class="site-nav">
            关于
          </a>
        
      
    </div>
  </div>
  <div class="bottom-container" data-aos="flip-up" data-aos-offset="0">
    <div class="social-container">
      
        
      
        
      
        
      
        
      
        
      
    </div>
    <div class="site-description">
      欢迎来到我的小窝~这里不仅有博客，也有日记。
    </div>
    <div class="site-footer">
      wuranxu's blog | <a class="rss" href="https://woodywrx.gitee.io/blog/atom.xml" target="_blank">RSS</a>
    </div>
  </div>
</div>


    <div class="main-container">
        <div class="content-container" data-aos="fade-up">
            <div class="post-detail">
                <h2 class="post-title">react hook</h2>
                <div class="post-date">2020-09-21 17:38:16</div>
                
                <div class="post-content" v-pre>
                    <h3 id="背景">🙃背景</h3>
<pre><code>在好奇心的驱使下，还是打开了==react hook==的大门，但是有些东西吧，还是得靠自己琢磨琢磨才能体会。
</code></pre>
<!-- more -->
<h3 id="优势">优势</h3>
<pre><code>在react hook里，函数式组件也能有状态管理了。它大概长这样！
</code></pre>
<pre><code class="language-Javascript">import React, {useState, useEffect} from 'react';

export default () =&gt; {
    // count是该函数组件的属性, 初始值是0
    const [count, setCount] = useState(0);

    return (
        &lt;div onClick={()=&gt;setCount(count+1)}&gt;当前点击次数为{count}&lt;/div&gt;
    )
}
</code></pre>
<pre><code>对比以前，可以发现这样写出来简单粗暴，几乎可以说是让我放弃了class的编写，但是我想不明白的是，如果一个组件里面有很多state，岂不是要写很多setXXX. 也可能是我自己的组件太过于耦合了，其实该拆的地方应该要拆。

官方给出的解释就是以下好处: 
</code></pre>
<p>以下内容搬运自掘金: https://juejin.im/post/6844903908335173645</p>
<h3 id="为什么会有-hook">为什么会有 Hook?</h3>
<pre><code>在组件之间复用状态逻辑很难

React 提供了一些方法来实现组件的选择性渲染或复用，如 Render Props、高阶组件 等，但这些方法组成的组件也带来了“嵌套地狱”的问题，复杂了组件的结构，增大了阅读理解代码的难度。React 提供了自定义 Hook 来解决上面提到的问题。


复杂组件变得难以理解
在一些复杂的组件中往往都包含了较多的状态逻辑和方法，如组件常常在 componentDidMount 中获取数据。但是，同时在该生命周期中也包含很多其它的逻辑，如设置事件监听，而之后需在 componentWillUnmount 中清除。一些原本没关联的的代码因为修改了相同的状态而冗杂在一起。当然 React 也引入了 Redux 用来实现状态管理，但这也引入了很多抽象概念，文件也相对应复杂起来。Hook 将组件中相互关联的部分拆分成更小的函数，而并非强制按照生命周期划分。


难以理解的 class
在组件中使用 class 时，开发者必须去理解 JavaScript 中 this 的工作方式，需要处理事件绑定等等，另外，class 还存在不能很好的压缩等问题。Hook 使你在非 class 的情况下可以使用更多的 React 特性。
</code></pre>
<h3 id="我这个初学者的理解手动微笑">我这个初学者的理解（手动微笑）</h3>
<pre><code>我是觉得这个hook给我带来最大的感受就是，一个组件的开发变得更加简单了。第一是因为函数组件本来就显得更简练，第二是可以用useEffect的第二个参数去处理生命周期，比之前的componentDidMount等更为简洁。关于使用方面，其实我自己还在使用dva的connect管理状态，用函数组件connect也能使用，所以暂时体会不到。先稍微记录下自己的感受，后面再更！</code></pre>

                </div>
                
                    <div class="tag-container">
                        
                            <a href="https://woodywrx.gitee.io/blog/5VtBytyNp/" class="tag">
                                前端入坑
                            </a>
                        
                    </div>
                

                
                    <div class="next-post">
                        <div class="next">下一篇</div>
                        <a href="https://woodywrx.gitee.io/blog/post/shua-ti-ri-ji-kai-pian/">
                            <h3 class="post-title">
                                刷题日记·开篇
                            </h3>
                        </a>
                    </div>
                
                
                    <span id="/blog/post/react-hook/"
                          class="leancloud_visitors" data-flag-title="react hook">
                <em class="post-meta-item-text">阅读量 </em>
                <i class="leancloud-visitors-count">0</i>
            </span>
                
                
                    

	<div id="vcomments" style="width: 100%;max-width:1000%;padding:2.5%"></div>



                

            </div>

        </div>
    </div>
</div>

<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script type="application/javascript">

AOS.init();

var app = new Vue({
  el: '#app',
  data: {
    menuVisible: false,
  },
})

</script>






<script src='https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js'></script>
<script>
    new Valine({
        el: '#vcomments',
        appId: 'fT8wvEVNtx1cOcCQEs7rVwnV-gzGzoHsz',
        appKey: 'xV6aDHKSkLfP7u0cBRIzpmcy',
        avatar: '',
        pageSize: 5,
        recordIp: true,
        placeholder: 'Just Go Go',
        visitor: true,
    });
</script>
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
</body>
</html>
